const gulp = require('gulp');
const watch =require('gulp-watch');
const sass = require('gulp-sass');
const sourcemap=require('gulp-sourcemaps');
const autoprefixerB=require('gulp-autoprefixer');
const imagemin=require('gulp-imagemin');
const clean = require('gulp-clean');
const htmlImport = require('gulp-html-import');




gulp.task('default',function(){});

//scss转化为css
function scssToCss(){
    return gulp.src(['./src/sass/**/*.{scss,css}'])
    .pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))  
    .pipe(autoprefixerB({
          cascade: true // 设定最终生成的css的样式
    }))
    .pipe(sourcemap.init())
    .pipe(sourcemap.write())
    .pipe(gulp.dest('./src/assets/css/'));
}
//img的文件压缩
function imgMin() {
  return gulp
    .src(['./src/assets/img/**/*.{jpeg,jpg,gif,ico,png,svg}'])
    .pipe(
      imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({
          plugins: [
            {removeViewBox: true},
            {cleanupIDs: false}
          ]
        })
        ])
    )
    .pipe(gulp.dest('./dist/assets/img/'));
}

function copyJS(){
  return gulp
  .src(['./src/assets/javascript/**/*.*']) 
  .pipe(gulp.dest('./dist/assets/javascript/'));
}

function copyCSS(){
  return gulp
  .src(['./src/assets/css/**/*.*']) 
  .pipe(gulp.dest('./dist/assets/css/'));  
}

function copyFont(){
  return gulp
  .src(['./src/assets/fonts/**/*.*']) 
  .pipe(gulp.dest('./dist/assets/fonts/'));  
}

function cleanDist(){
  return gulp
      .src(['dist/**/*.*'], {
        read: false,
        allowEmpty: true
      })
      .pipe(clean());
}

//用html的模板,进行导入的操作
function importHtml(){
  gulp.src('./src/view/**/*.*')
  .pipe(htmlImport('./src/components_view/'))  
  .pipe(gulp.dest('./src/')); 
}

//动态的监听html的模板导入的问题
function watchImportHtml(){
  watch(
    ['./src/view/**/*.html','./src/components_view/**/*.html'],importHtml
  );
}

//事实监听scss转化为css
function watchCSS(){
    gulp.watch(
        ['./src/sass/**/*.scss'],
        gulp.series(scssToCss) //任务自定义
      );
}

//tudo自动编译完成处理
gulp.task("watch",gulp.parallel(gulp.series(scssToCss,watchCSS),watchImportHtml));